<template>
    <div>
        <h5>历史记录</h5>
        <div>
            <p @click="takeNotes(i)"  v-for="(rec,i) in record" :key="i" >
                {{rec}}
                <a @click.stop="del(i)">×</a> <!--a标签要阻止冒泡-->
            </p>
        </div>
    </div>
</template>

<script>

export default {
    components: {

    },
    data() {
        return {
            record:[],
                
        };
    },
    methods: {
        takeNotes(i){//调用事件时,把下标传递过来
            this.$emit('func',this.record[i])//根据下标找到被点击得到的记录,调用方法修改输入框类容
            this.$emit('query')
        },
        getRecord(){
            //从浏览器中获取历史记录缓存,没有缓存则获取空数组
            this.record = JSON.parse(localStorage.getItem("record") || "[]") ;
            
        },
        del(i){
            this.record.splice(i,1)
            localStorage.setItem("record",JSON.stringify(this.record));
        },
    },
    created(){
        this.getRecord()
    }
}
</script>
<style  scoped>
    h5{
        padding-left:5vw; 
        padding-bottom: 5vw;
    }
    p{
        margin: 0;
        padding: 1vw 5vw;
        color: #666;
        font-size:inherit;
        border-bottom: #aaa 1px solid
    }
    p:first-child { /* 第一行历史记录有上边*/
        border-top: #aaa 1px solid
    }
    a{
        position: absolute;
        right: 5vw;
        width: 5vw;
        text-align: center;
    }
</style>